<template>
    <view class="container">
        <picker @change="bindPickerChange" :value="index" :range="array">
            <view class="picker">
                <view class="fb-type">
                    <view class="type-label">{{ array[index] }}</view>
                    <van-icon class="type-icon" name="arrow-down" />
                </view>
            </view>
        </picker>
        <view class="fb-body">
            <textarea
                class="content"
                placeholder="对我们网站、商品、服务，你还有什么建议吗？你还希望在商城上买到什么？请告诉我们..."
                @input="contentInput"
                maxlength="500"
                :auto-focus="true"
                :value="content"
            />
            <view class="weui-uploader__files" id="uploaderFiles">
                <block v-for="(item, index) in files" :key="index">
                    <view class="weui-uploader__file" @tap="previewImage" :id="item">
                        <image class="weui-uploader__img" :src="item" mode="aspectFill" />
                    </view>
                </block>
                <view class="weui-uploader__input-box" v-if="files.length < 5">
                    <view class="weui-uploader__input" @tap="chooseImage"></view>
                </view>
            </view>
            <view class="text-count">{{ contentLength }}/500</view>
        </view>
        <view class="fb-mobile">
            <view class="label">手机号码</view>
            <view class="mobile-box">
                <input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" @input="mobileInput" :value="mobile" />
                <van-icon class="clear-icon" name="close" v-if="mobile.length > 0" @tap.native.stop.prevent="clearMobile" />
            </view>
        </view>

        <view class="fb-btn" @tap="submitFeedback">提交</view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');

var check = require('../../../utils/check.js');

var api = require('../../../config/api.js');

var app = getApp();
export default {
    data() {
        return {
            array: ['请选择反馈类型', '商品相关', '功能异常', '优化建议', '其他'],
            index: 0,
            content: '',
            contentLength: 0,
            mobile: {
                length: 0
            },
            hasPicture: false,
            picUrls: [],
            files: []
        };
    },
    onLoad: function (options) {},
    onReady: function () {},
    onShow: function () {},
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        chooseImage: function (e) {
            if (this.files.length >= 5) {
                util.showErrorToast('只能上传五张图片');
                return false;
            }

            var that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    that.setData({
                        files: that.files.concat(res.tempFilePaths)
                    });
                    that.upload(res);
                }
            });
        },

        upload: function (res) {
            var that = this;
            const uploadTask = uni.uploadFile({
                url: api.StorageUpload,
                filePath: res.tempFilePaths[0],
                name: 'file',
                success: function (res) {
                    var _res = JSON.parse(res.data);

                    if (_res.errno === 0) {
                        var url = _res.data.url;
                        that.picUrls.push(url);
                        that.setData({
                            hasPicture: true,
                            picUrls: that.picUrls
                        });
                    }
                },
                fail: function (e) {
                    uni.showModal({
                        title: '错误',
                        content: '上传失败',
                        showCancel: false
                    });
                }
            });
            uploadTask.onProgressUpdate((res) => {
                console.log('上传进度', res.progress);
                console.log('已经上传的数据长度', res.totalBytesSent);
                console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
            });
        },

        previewImage: function (e) {
            uni.previewImage({
                current: e.currentTarget.id,
                // 当前显示图片的http链接
                urls: this.files // 需要预览的图片http链接列表
            });
        },

        bindPickerChange: function (e) {
            this.setData({
                index: e.detail.value
            });
        },

        mobileInput: function (e) {
            this.setData({
                mobile: e.detail.value
            });
        },

        contentInput: function (e) {
            this.setData({
                contentLength: e.detail.cursor,
                content: e.detail.value
            });
        },

        clearMobile: function (e) {
            this.setData({
                mobile: ''
            });
        },

        submitFeedback: function (e) {
            if (!app.globalData.hasLogin) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }

            let that = this;

            if (that.index == 0) {
                util.showErrorToast('请选择反馈类型');
                return false;
            }

            if (that.content == '') {
                util.showErrorToast('请输入反馈内容');
                return false;
            }

            if (that.mobile == '') {
                util.showErrorToast('请输入手机号码');
                return false;
            }

            uni.showLoading({
                title: '提交中...',
                mask: true,
                success: function () {}
            });
            util.request(
                api.FeedbackAdd,
                {
                    mobile: that.mobile,
                    feedType: that.array[that.index],
                    content: that.content,
                    hasPicture: that.hasPicture,
                    picUrls: that.picUrls
                },
                'POST'
            ).then(function (res) {
                uni.hideLoading();

                if (res.errno === 0) {
                    uni.showToast({
                        title: '感谢您的反馈！',
                        icon: 'success',
                        duration: 2000,
                        complete: function () {
                            that.setData({
                                index: 0,
                                content: '',
                                contentLength: 0,
                                mobile: '',
                                hasPicture: false,
                                picUrls: [],
                                files: []
                            });
                        }
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        }
    }
};
</script>
<style>
@import './feedback.css';
</style>
